<template>
	<div class="hote-floor-container">
		<span class="hote-floor-num">{{floorData.floorNum}}层</span>
		<div class="hote-floor-room-box">
			<hote-room v-for="roomData in floorData.roomData" :roomData="roomData" />
		</div>
	</div>
</template>

<style>
	.hote-floor-container {
		padding: 5px 20px;
		position: relative;
		width: 1040px;
	}

	.hote-floor-room-box {
		display: inline-block;
		vertical-align:top;
		margin-left: 55px;
	}

	.hote-floor-num {
		position: absolute;
		display: inline-block;
		vertical-align:top;
		width: 55px;
		margin-top: 40px;
		text-align: center;
		font-size: 16px;
		font-weight: bold;
		color: rgb(32, 160, 255);
	}
</style>

<script>
	import Room from './Room';
	export default {
		props: {
			floorData: {
				type: Object,
				default: {}
			}
		},
		components: {
			'hote-room': Room
		}
	}
</script>